<template>
	<view class="goodsListBox">
		<view class="flex PLR goodsList">
			<view class="goodsItem" v-for="(item,i) in hotDoorGoods" :key='item.img_url' @click="goDetail(item.id)">
				<image
					:src="hotDoorGoodsImage[i] || 'https://pic.baike.soso.com/pqpic/baikepic/32740/cut-20140430160117-26333648.jpg/0'">
				</image>
				<view>
					<text class="sell_price">{{item.sell_price}}</text>
					<text class="market_price">{{item.market_price}}</text>
					<view class="manyTextOverflow">{{item.title}}</view>
				</view>
			</view>
		</view>
		<view class="isOver PB">~我是有底线的~</view>
	</view>
</template>

<script>
	export default {
		name: "goodsList",
		props: ['hotDoorGoods', 'hotDoorGoodsImage'],
		data() {
			return {

			};
		},
		methods: {
			goDetail(id){
				uni.navigateTo({
					url:`/pages/goodsDetail/goodsDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.goodsListBox {
		background-color: $themeColor;

		.goodsList {
			flex-wrap: wrap;
			padding-top: 16rpx;
			justify-content: space-between;

			.goodsItem {
				width: 49%;
				padding: 0 10rpx;
				margin-bottom: 2%;
				border-radius: 4rpx;
				background-color: #fff;

				image {
					width: 100%;
					height: 300rpx;
				}

				.manyTextOverflow {
					margin: 10rpx 0 30rpx;
					-webkit-line-clamp: 2;
				}
			}
		}

		.isOver {
			color: #fff;
			padding-top: 10rpx;
			text-align: center;
		}
	}
</style>
